<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <input placeholder="请输入要查找的内容" v-model="query">
    <transition-group name="item" tag="ul" @before-enter="beforeEnter"
     @enter="enter" @leave="leave" v-bind:css="false">
      <li v-for="(item, index) in ComputedList" :key="item.msg"
       :data-index="index">
        {{ item.msg }}
      </li>
    </transition-group>
  </div>
  <script>
    var vm = new Vue({
      el:'#app',
      data(){
        return {
          query:'',
          item:[
            {msg:'zs'},
            {msg:'ls'},
            {msg:'ww'},
            {msg:'zff'},
            {msg:'wll'},
            {msg:'zsd'},
            {msg:'zas'}
          ]
        }
      },
      computed:{
        ComputedList(){
          var vm = this.query,
          nameList = this.item
          return nameList.filter(function (item){
            return item.msg().indexOf(vm) !==-1
          })
        }
      },
      methods:{
        beforeEnter(el){
          el.style.opacity = 0;
          el.style.height = 0
        },
        enter(el,done){
          var delay = el.dataset.index * 150
          setTimeout(()=>{
            Velocity(el,{opacity:1,height:'1.6em'},{complete:done})
          },delay)
        },
        leave(el,done){
          var delay = el.dataset.index *150
          setTimeout(()=>{
            Velocity(el,{opacity:0,height:0},{complete:done})
          },delay)
        }
      }
    })
  </script>
</body>
</html>